<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="/WEB-INF/views/ueditor.jsp"></jsp:include>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>工艺卡管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/layui.css"  media="all">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/toastr.min.css"  media="all">

<style type="text/css">
.laytable-cell-1-imageUrl{
	height:100%;
	max-width:100%;
}
</style>

</head>
<body>

	<!-- 页面顶部搜索框 -->
	<div class="demoTable" style="padding:10px 0 0 15px">
    	<div class="layui-inline">
        	<input class="layui-input" name="keyWord" id="keyWord" placeholder="请输入工位名称" autocomplete="off">
    	</div> &nbsp; &nbsp; &nbsp; &nbsp;
    	<button class="layui-btn layui-btn-blue" style="margin: 0 0 0 10px" data-type="reload"><i class="layui-icon layui-icon-search">  搜索</i></button>
	</div>
	<!-- 富文本编辑框 -->
	<form class="layui-form" id="getValue" hidden="hidden">
		<textarea id="MESSAGE"></textarea>
		<button type="button" class="layui-btn layui-btn-blue" onclick="getValue()" lay-filter="getValueBtn" style="margin: 20px 0px 20px 300px ">保存</button>
	</form>
	<!-- 工艺信息表单 -->
	<table class="layui-hide" id="test" lay-filter="test"></table>
	<!-- 新增的表单 -->
	<div id="formDiv" hidden>
		<form class="layui-form" id="addform">
			<div class="layui-form-item">
				<input type="hidden" id="rid" name="rid" lay-verify="rid">
				<input type="hidden" id="rproductionTime" name="rproductionTime" lay-verify="rproductionTime">
				<input type="hidden" id="rproducer" name="rproducer" lay-verify="rproducer">
			</div>
			<br>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label" style="margin-left: 50px;">工位名称</label>
					<div class="layui-input-inline" style="width:300px">
						<select id="positionId" name="positionId" onfocus="editValue()" class="layui-input" lay-search="" lay-verify="positionId">
							<option value="">请选择工位名称</option>
							<c:forEach items="${listAllPosition }" var="positions">
									<option value="${positions.pid }">${positions.pname }</option>
								</c:forEach>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<font style="color:red; font-size: 24px;">*</font>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label" style="margin-left: 50px;">产品名称</label>
					<div class="layui-input-inline" style="width:300px">
						<select id="productId" name="productId" onfocus="editValue()" class="layui-input" lay-search="" lay-verify="productId">
							<option value="">请选择产品名称</option>
							<c:forEach items="${listAllProduct }" var="products">
								<option value="${products.pid }">${products.pname }</option>
							</c:forEach>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<font style="color:red; font-size: 24px;">*</font>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label" style="margin-left: 50px;">版本号</label>
					<div class="layui-input-inline" style="width:300px">
						<input lay-verify="engineeringEnum" class="layui-input"  onfocus="editValue()" type="text" id="engineeringEnum" name="engineeringEnum" style="width:300px">
					</div>
				</div>
				<div class="layui-inline">
					<font style="color:red; font-size: 24px;">*</font>
				</div>
			</div>		
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label" style="margin-left: 50px;">工艺详情</label>
					<div class="layui-input-inline" style="width:300px">
						<input lay-verify="rmethod" class="layui-input" type="hidden" id="rmethod" name="rmethod">
						<button type="button" class="layui-btn layui-btn-blue" onclick="saveReferenceAA()">编辑工艺详情</button> 
					</div> 
				</div>
			</div>
			<br>		
			<button class="layui-btn layui-btn-blue" lay-submit lay-filter="addform" id="submit" style="margin-left:200px">提交</button>&emsp;&emsp;&emsp;<button type="reset" class="layui-btn layui-btn-primary">重置</button></td>
		</form>
	</div>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-blue" lay-event="add"><i class="layui-icon layui-icon-add-1">  新增</i></button>
		<button class="layui-btn layui-btn-blue" lay-event="delete"><i class="layui-icon layui-icon-delete">批量删除</i></button>
	</div>
</script>

<script type="text/html" id="barDemo1">
 <a lay-event="look">查看工艺</a>
</script>
 
 
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  
</script>
             
<script src="${pageContext.request.contextPath }/assets/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/layui.all.js"></script>
<script src="${pageContext.request.contextPath }/assets/js/jquery.min.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/js/toastr.min.js" charset="utf-8"></script>


<script>
var imgUrl = "";
var videoUrl = "";
var success = 0;
var fail = 0;
var layedit = null;
layui.use(['table','layer','upload','form', 'layedit'], function(){
	var laydate = layui.laydate;
	var table = layui.table;
	var layer = layui.layer;
	var upload = layui.upload;
    var form = layui.form;
    layedit = layui.layedit;
	//执行一个laydate实例
	laydate.render({
		elem: '#rproductionTime', //指定元素
		type: 'date'
	});
	
	var $ = layui.jquery, active = {
			reload:function () {
				var positionNumber = $("#keyWord").val();
				table.reload('contenttable',{
					method:'get',
					where:{positionNumber: positionNumber},
					page:{
						curr:1  //重新从第一页开始
					}
				}); 
			}
		}
	$('.layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
	table.render({
	    elem: '#test'
	    ,url:'${pageContext.request.contextPath }/refrenceMana/listPageReference.do'
	    ,toolbar: '#toolbarDemo'
	    ,title: '工艺卡管理'
	    ,id :'contenttable'
	    ,limits:[10,20,30]
	    ,cols: [[
	      {type: 'checkbox', fixed: 'left'}
	      ,{field:'positionNumber', title:'工位名称'}
	      ,{field:'productNumber', title:'产品名称'}
	      ,{field:'engineeringEnum', title:'版本号'}
	      ,{field:'rmethod', title:'工艺详情', toolbar:'#barDemo1'}
	      ,{fixed: 'right', title:'操作',  width: 130, toolbar: '#barDemo'}
	    ]]
	    ,page: true
	});
  
			
	
	//头工具栏事件
	table.on('toolbar(test)', function(obj){
		var checkStatus = table.checkStatus(obj.config.id);
	    
		switch(obj.event){
	    	case 'add':
	    		layer.open({
					  type: 1 		//Page层类型
					  ,area: ['600px', '600px'] //宽  高
					  ,title: '新增'
					  ,shade: 0.1 	//遮罩透明度
					  ,shadeClose: true //点击遮罩关闭
					  ,maxmin: true //允许全屏最小化
					  ,anim: 1 		//0-6的动画形式，-1不开启
					  ,content: $('#formDiv')
					  ,success: function () {
						  document.getElementById("addform").reset();
						  $('#rid').val();
					  }
					  ,end: function () {
						  var formDiv = document.getElementById('formDiv');
						  formDiv.style.display = '';
					  }
					});
	      	break;
	    	case 'delete':
	        	var data = checkStatus.data;
	        	var str = "";
	        	if(data.length==0){
	        		toastr.warning("请至少选择一条记录！");
	        	}else{
	        		for(var i=0;i<data.length;i++){
		        		str += data[i].rid;
		        		if(i != data.length-1){
		        			str += ",";
		        		}
		        	}
		        	layer.confirm('确定删除吗？', function(index){
		        		$.ajax({
					    	type:'post',
					    	url:'${pageContext.request.contextPath }/refrenceMana/deleteReference.do',
					    	data:{"str" : str},
					    	success:function(data){
					    		if(data>0){
					    			toastr.success("删除成功！");
					    			setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
										//关闭模态框
										// 父页面刷新
										window.location.reload();  
									},2000); 
					    		}else{
					    			toastr.warning("删除失败！");
					    		}
					    	}
					    }); 
		        	});
	        	}
	      	break;
	      	case 'select':
	      		console.log(obj)
	      	break;
	    };
	});
  
	//监听行工具事件
	table.on('tool(test)', function(obj){
		var data = obj.data;
		if(obj.event === 'del'){
		  layer.confirm('确定删除吗？', function(index){
		    var rid = obj.data.rid;
		    //console.log(rid)
		    $.ajax({
		    	type:'post',
		    	url:'${pageContext.request.contextPath }/refrenceMana/deleteReference.do',
		    	data:{"str":rid},
		    	dataType : "json",
		    	success:function(data){
		    		if(data>0){
		    			toastr.success("删除成功！");
		    			setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
							//关闭模态框
							// 父页面刷新
							window.location.reload();  
						},2000);
		    		}else{
		    			toastr.warning("删除失败！");
		    		}
		    	}
		    		
		    })
		    layer.close(index);
		  });
		} else if(obj.event === 'edit'){
			var text = Object.entries(data)[9][1];
			ue.setContent(text);
			alert(ue.getContent());
			layer.open({
				  type: 1 		//Page层类型
				  ,area: ['600px', '600px'] //宽  高
				  ,title: '编辑'
				  ,shade: 0.1 	//遮罩透明度
				  ,maxmin: true //允许全屏最小化
				  ,anim: 1 		//0-6的动画形式，-1不开启
				  ,content: $('#formDiv')
				  ,success: function () {
					//回显表单数据
				  	for(var i=0;i<Object.entries(data).length;i++) {
						var id = '#' + Object.entries(data)[i][0];
						var text = Object.entries(data)[i][1];
						$(id).val(text);
					}
					form.render();
				  }	
				  ,end: function () {
				  	var formDiv = document.getElementById('formDiv');
				  	formDiv.style.display = '';
			  	  }
			});
		}else if(obj.event === 'look'){
			var text = Object.entries(data)[9][1];
			var look = '<div>' + text + '</div>'
			if(text.length > 0){
				layer.open({
					  type: 1 		//Page层类型
					  ,area: ['900px', '600px'] //宽  高
					  ,title: '查看工艺详情'
					  ,shade: 0.1 	//遮罩透明度
					  ,maxmin: true //允许全屏最小化
					  ,anim: 1 		//0-6的动画形式，-1不开启
					  ,content: look
					  ,success: function () {
						  
					  }	
					  ,end: function () {
						 
				  	  }
				});
			}else{
				toastr.warning('未添加工艺详情！');
			}
		}
	});
	/**
     * 表单校验
     */
    form.verify({
    	//value：表单的值、item：表单的DOM对象
    	positionId: function(value){
    		var str = value.replace(/\s+/g,"");
    		if(str == ''){
    			return '工位名称不能为空';
    		}
    	},
    	productId: function(value){
    		var str = value.replace(/\s+/g,"");
    		if(str == ''){
    			return '产品名称不能为空';
    		}
    	},
    	engineeringEnum: function(value){
    		var str = value.replace(/\s+/g,"");
    		if(str == ''){
    			return '版本号不能为空';
    		}
    	},
    }); 
	
    /**
     * 通用表单提交(AJAX方式)（新增）
     */
    form.on('submit(addform)', function (data) {
    	$("#submit").attr("disabled",true);
    	var value = ue.getContent();
    	$('#rmethod').val(value);
    	alert($('#rmethod').val());
    	/* $.ajax({
   			url : '${pageContext.request.contextPath }/refrenceMana/saveReference.do',
   			data : $('#addform').serialize(),
   			type : "post",
   			dataType : "json",
   			}).done(
   				function(res) {
   					if (res > 0) {
   						console.log(res);
   						if(res == 2){
   							toastr.success('新增成功！');
   						}
   						if(res == 3){
   							toastr.success('修改成功！');
   						}
						setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
							//关闭模态框
							// 父页面刷新
							window.location.reload();  
						},2000);
   					}else{
   						if(res == -2){
   	   						toastr.error('新增失败！');
   	   					}
   	   					if(res == -3){
   	   						toastr.error('修改失败！');
   	   					}
   					}
   				}
   			).fail(
   				function(res) {
   					console.log(res);
   					if(res == -2){
   						toastr.error('新增失败！');
   					}
   					if(res == -3){
   						toastr.error('修改失败！');
   					}
   				}
   			)  */
		return false; 
    });
    
});

//日期格式化
function timestampToTime(timestamp) {
	if (timestamp == null) {
		return '';
	} else {
		var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
		Y = date.getFullYear() + '-';
		M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
		D = (date.getDate()+1 < 10 ? '0'+(date.getDate()) : date.getDate()) + ' ';
		return Y+M+D;
	}
}

function editValue(){
	$("#submit").attr("disabled",false);
}

toastr.options.positionClass = 'toast-top-center'; //提示框的位置设置为中上

function saveReferenceAA(){
	layer.open({
		  type: 1 		//Page层类型
		  ,area: ['900px', '600px'] //宽  高
		  ,title: '新增工艺详情'
		  ,shade: 0.1 	//遮罩透明度
		  ,maxmin: true //允许全屏最小化
		  ,anim: 1 		//0-6的动画形式，-1不开启
		  ,content: $("#getValue")
		  ,success: function () {
			  
		  }	
		  ,end: function () {
			  $("#getValue").hide();
	  	  }
	});
}
//把富文本框的内容赋给工艺详情字段
function getValue(){
	var value = ue.getContent();
	$('#rmethod').val(value);
	//关闭最外层弹框
	layer.close(layer.index);
}

</script>
</body>
</html>